﻿<Page
    x:Class="Instemote.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Instemote"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <ContentControl x:Name="ContentContainer"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Content="{TemplateBinding Content}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid>
        <Grid x:Name="LayoutRoot">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <StackPanel Grid.Row="0" Margin="22,12,0,28">
                <TextBlock Text="INSTEMOTE" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/>
                <TextBlock Text="scenes" Margin="0,0,0,0" Style="{ThemeResource HeaderTextBlockStyle}"/>
            </StackPanel>

            <Grid Grid.Row="1" x:Name="ContentRoot" Margin="22,0,22,0">
                <ListView  x:Name="SceneListBox" Background="{StaticResource PhoneBackgroundBrush}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,12">                               
                                <TextBlock Text="{Binding Name}" FontSize="30" Foreground="{StaticResource PhoneAccentBrush}"/>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Button Content="off" Grid.Column="1" Tapped="Button_Off" HorizontalAlignment="Stretch" Margin="12,0,0,0"></Button>
                                    <Button Content="on" Grid.Column="0"  Tapped="Button_On" HorizontalAlignment="Stretch" Margin="0,0,12,0"></Button>
                                </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>
        </Grid>
        <Grid x:Name="CommandOverLay" Visibility="Collapsed" Background="#EE000000">
            <Grid.Resources>
                <Storyboard x:Name="FadeOutCommandOverLay" Completed="FadeOutCommandOverLay_Completed" BeginTime="0:0:2">
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="CommandOverLay"
                        Storyboard.TargetProperty="Opacity">
                        <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
                        <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.6"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
                
                <Storyboard x:Name="FadeInCommandOverlay" BeginTime="0:0:0.2" Completed="FadeInCommandOverlay_Completed">
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="CommandOverLay"
                        Storyboard.TargetProperty="Opacity">
                        <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                        <LinearDoubleKeyFrame Value="1" KeyTime="0:0:1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>

            <StackPanel VerticalAlignment="Center">
                <Ellipse Width="70" Height="70" Fill="{StaticResource PhoneAccentBrush}" x:Name="Bulb1" />
                <Rectangle Width="20" Height="10" Fill="{StaticResource PhoneAccentBrush}" Margin="0,5,0,0" x:Name="Bulb2"> </Rectangle>                
            </StackPanel>

            <TextBlock x:Name="CommandText" Text="Lights On" FontSize="20" Foreground="{StaticResource PhoneAccentBrush}" Margin="0,170,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

            <Rectangle Width="20" Height="3" Fill="{StaticResource PhoneAccentBrush}" Margin="110,0,0,0" x:Name="Bulb3"/>
            <Rectangle Width="20" Height="3" Fill="{StaticResource PhoneAccentBrush}" Margin="-110,0,0,0" x:Name="Bulb4"/>
            <Rectangle Width="20" Height="3" Fill="{StaticResource PhoneAccentBrush}" Margin="95,0,0,90" x:Name="Bulb5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="-28" />
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Width="3" Height="20" Margin="0,0,0,160" Fill="{StaticResource PhoneAccentBrush}" x:Name="Bulb6"/>
            <Rectangle Width="20" Height="3" Fill="{StaticResource PhoneAccentBrush}" Margin="-95,0,0,112" x:Name="Bulb7">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="30" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>
    </Grid>

    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="settings" Click="Settings_Click" />
                <AppBarButton Label="log out" Click="LogOut_Click" />
            </CommandBar.SecondaryCommands>
            <CommandBar.PrimaryCommands>
                <AppBarButton Label="refresh" Click="Refresh_Click">
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="Assets/appbar.sync.rest.png"/>
                    </AppBarButton.Icon>
                </AppBarButton>
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>